<template>
  <div class="details-box">
    <img v-if="good.picture" :src="'https://rongxiaotong.oss-cn-beijing.aliyuncs.com/order/' + good.picture" alt="" />
    <img v-else src="https://rongxiaotong.oss-cn-beijing.aliyuncs.com/order/wutu.gif" alt=""
      style="border:1px solid #f2f2f2;" />
    <div class="info">
      <h4 class="title">{{ good.title }}</h4>
      <div class="content" :title="good.content">{{ good.content }}</div>
      <span class="price">￥{{ good.price }}</span>
      <div class="time">
        <span style="margin-right:30px;">发布时间：{{ formatDate(good.createTime) }}</span>
        <span>最近修改时间：{{ formatDate(good.updateTime) }}</span>
      </div>
      <div class="item-style">
        <div class="operation">
          <div class="operation-item"><img src="../assets/img/good.png" class="operation-img" alt="" /> 点赞</div>
          <div class="operation-item"><img src="../assets/img/no-star.png" class="operation-img" alt="" /> 收藏</div>
          <div class="operation-item"><img src="../assets/img/fill-in.png" class="operation-img" alt="" />评论</div>
        </div>
        <div class="btn-content">

          <el-popover placement="right" width="320" trigger="hover">
            <template #reference>
              <el-button type="danger" @click="addShopcartClick" v-if="good.type == 'goods'">加入购物车</el-button>
            </template>

            <div>
              <div class="item-sales">买家姓名：<span class="sales-text">{{ ownUserData.nickname }}</span></div>
              <div class="item-sales">卖家地址：<span class="sales-text">{{ good.address }}</span></div>
              <div class="item-sales">买家手机号码：<span class="sales-text">{{ ownUserData.username }}</span></div>
              <div class="item-sales">更新时间：<span class="sales-text">{{ formatDateTime(ownUserData.updateTime) }}</span>
              </div>
            </div>
            <el-button type="danger" slot="reference" @click.once="changeInfo(good.orderId)"
              v-show="good.type == 'needs'">联系买家</el-button>
          </el-popover>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { GetOrderDetailsAPI } from '../api/order'
import { GetOrderOwnDataAPI } from '../api/user'
import { AddShoppingCartAPI } from '../api/shoppingcart';
import { useRoute } from 'vue-router'

const good = ref({
  orderId: '',
  picture: '',
  title: '',
  content: '',
  price: '',
  createTime: '',
  updateTime: '',
  type: '',
  address: ''
})

const route = useRoute()

onMounted(() => {
  getGoodDetails(route.params.orderId as string)
  getOrderOwnData(route.params.orderId as string)
})

function getGoodDetails(orderId: string) {
  GetOrderDetailsAPI({orderId:orderId})
    .then((res) => {
      if (res.code === 200 && res.msg !== null) {
        good.value = res.data

      }
      if (res.code === 100 && res.msg !== null) {
        ElMessage.error(res.msg)
      }

    })
}


function formatDateTime(createTime: string) {
  const date = new Date(createTime);
  return date.toLocaleString();
}
function formatDate(createdate: string) {
  const date = new Date(createdate);
  return date.toLocaleDateString();
}
// function formatTime(createdatetime: string) {
//     const date = new Date(createdatetime);
//     return date.toLocaleTimeString();
// }

function addShopcartClick() {
  AddShoppingCartAPI({
    userId: localStorage.getItem('userId') as string,
    orderId: good.value.orderId
  })
  .then((res) => {
      if (res.code === 200 && res.msg !== null) {
        ownUserData.value = res.data

      }
      if (res.code === 100 && res.msg !== null) {
        ElMessage.error(res.msg)
      }

    })
}

function changeInfo(orderId: string) {
  console.log(orderId)
}

const ownUserData = ref({
  username: '',
  nickname: '',
  updateTime: '',
})

function getOrderOwnData(orderId: string) {
  GetOrderOwnDataAPI({orderId:orderId})
    .then((res) => {
      if (res.code === 200 && res.msg !== null) {
        ownUserData.value = res.data

      }
      if (res.code === 100 && res.msg !== null) {
        ElMessage.error(res.msg)
      }

    })
}

</script>

<style lang="less" scoped>
.details-box {
  width: 1100px;
  height: 100%;
  margin: 20px auto;
  padding: 20px;
  background: #fff;
  display: flex;
  justify-content: space-between;

  img {
    width: 360px;
    height: 300px;
    border-radius: 6px;
  }

  .info {
    position: relative;
    width: 680px;
    height: 300px;
    border: 1px solid #f2f2f2;
    // box-shadow: 3px 3px 3px rgba(3, 0, 0, 0.07);
    border-radius: 6px;
    padding: 10px 20px;
    text-align: left;
    .title {
      font-size: 22px;
      font-weight: bold;
      margin-top: 0px;
    }

    .content {
      height: 100px;
      border: 1px dashed #f2f2f2;
      line-height: 23px;
      padding: 5px 10px;
      /*超出的部分隐藏*/
      overflow: hidden;
      /*文字用省略号替代超出的部分*/
      text-overflow: ellipsis;
      /*弹性伸缩盒子模型显示*/
      display: -webkit-box;
      /*限制在一个块元素显示文本的行数*/
      -webkit-line-clamp: 4;
      /*设置或检索伸缩盒对象的子元素排列方式*/
      -webkit-box-orient: vertical;
    }

    .price {
      color: red;
      font-size: 25px;
      font-weight: bold;
    }

    .time {
      margin-top: 5px;
      color: #999;
      display: flex;
      justify-content: flex-start;
    }

    .item-style {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      margin-top: 5px;
      align-items: center;
    }
  }

  .operation {
    display: flex;
    margin-top: 10px;
    margin-right: 150px;

    .operation-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-right: 10px;

      .operation-img {
        width: 20px;
        height: 20px;
        margin-bottom: 5px;
        border-radius: 6px;
      }
    }
  }

  .btn-content {
    margin-top: 10px;
  }

  .item-sales {
    color: #333 !important;
    line-height: 30px;
    max-height: 30px;

    .sales-text {
      color: #666;
    }
  }
}</style>